<template>
  <div>
    <router-view />
    <van-tabbar class="footer" v-model="active" fixed z-index=3 route @change="onChange" placeholder>
      <!-- <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
      <van-tabbar-item icon="service-o" to="/music">音乐列表</van-tabbar-item> -->
      <van-tabbar-item icon="logistics" to="/pound">磅单</van-tabbar-item>
      <!-- <van-tabbar-item icon="gem-o" dot to="/my">我的</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      // 当前选中项
      active: 0,
      // 购物车数量
      badge: this.total,
    };
  },
  computed: {},
  watch: {
    total: {
      handler(newVal) {
        this.badge = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    // 导航栏切换
    onChange(item) {
      this.active = item;
    },
  },
};
</script>

<style  scoped>
.footer {
  position: fixed;
  bottom: 0;
}
</style>
